<template>
  <scroll-view scroll-y :style="listHeightStyle" class="content" @scrolltolower="loadMore">
    <view class="item" v-for="(item, index) in data" :key="index" @click="handleJump('/pages/user/introduceDetail?id=' + item.id)">
      <view>
        <view class="title">绿港云平台 {{ item.version_name }} 主要更新</view>
        <view class="tip">{{ item.create_time }}</view>
      </view>
      <u-icon name="arrow-right" color="#999" size="16"></u-icon>
    </view>
    <u-loadmore :status="status" v-if="loading" />
  </scroll-view>
</template>

<script>
import setting from "@/apis/cloud/setting.js";

export default {
  data() {
    return {
      data: [],
      pageSize: 20,
      pageNum: 1,
      total: 0,
      status: "loadmore",
      loading: false,
      contentHeight: 0,
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      topHeight: 0,
      appwindowHeight:0,
    };
  },
  onLoad() {
    this.getList();
    this.setContentHeight();
  },
  created() {
    let app = uni.getSystemInfoSync();
    this.appwindowHeight = app.windowHeight;
    this.setContentHeight()
  },
  methods: {
    setContentHeight() {
      const windowHeight = window.innerHeight; // 视口高度
      const navbarHeight = 10; // 导航栏高度（假设为 44px）
      const tabsHeight = 40;


      // #ifdef APP-PLUS
      this.listHeightStyle = {
        overflowY: 'hidden',
        height: `${this.appwindowHeight - 5}px`,
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden'
      };
      // #endif

    },

    async getList() {
      if (this.loading || this.status == "nomore") return;
      this.loading = true;
      this.status = "loading";

      const res = await setting.versionList({
        keywords: "",
        page: this.pageNum,
        row: this.pageSize,
      });
      if (res.status == 1) {
        if (res.data.length == 0) {
          this.status = "nomore";
          return;
        }
        if (this.pageNum === 1) {
          this.data = res.data;
        } else {
          res.data.forEach((item) => {
            this.data.push(item);
          });
        }
        this.pageNum++;
      } else {
        this.status = "";
      }
      this.loading = false;
    },
    handleJump (url) {
      uni.navigateTo({
        url: url
      });
    }
  },
};
</script>

<style lang="scss">
.content {
  padding-bottom: env(safe-area-inset-bottom);
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #ccc;
}
.tip {
  color: #999;
  font-size: 24rpx;
  padding-top: 10rpx;
}
</style>
